<template>
  <div>
    <div class="form">
      <div class="search">
        <div class="date_picker">
          <el-input placeholder="请输入视频标题" v-model="videoTitle" class="search_info">
            <i slot="prefix" class="el-input__icon el-icon-search"></i>
          </el-input>
        </div>
        <div>
          <el-button @click="reset()" class="searchBtn">重置</el-button>
          <el-button type="primary" @click="getList(1)" class="searchBtn">搜索</el-button>
          <el-button type="primary" @click="add()" class="searchBtn">新增解析视频</el-button>
        </div>
      </div>
      <el-table
        class="listTable"
        v-loading="listLoading"
        :data="list"
        border
        fit
        highlight-current-row
        style="width: 100%;"
      >
        <el-table-column label="视频标题" align="center">
          <template slot-scope="{row}">
            <span>{{ row.videoName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="视频展示地址" align="center">
          <template slot-scope="{row}">
            <span>{{ row.videoUrl }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center"  class-name="small-padding fixed-width">
          <template slot-scope="{row}">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-info"
              @click="preview(row.videoUrl)"
            >视频详情</el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="del(row.id)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :total="total"
        layout="total, sizes, prev, pager, next"
        :page-size="limit"
        :page-sizes="[10, 20, 50, 100]"
        @size-change="handleSizeChange"
        :current-page.sync="curPage"
        @current-change="getList($event)"
        class="sortStyle"
      />
    </div>
    <el-dialog title="视频新增" :visible.sync="addShow" center :modal-append-to-body="false" :close-on-click-modal="false">
		   <div class="inline">
         <div class="fonts">视频标题：</div><div><el-input v-model="addVideoTitle" placeholder="请输入"></el-input></div>
       </div>
       <div class="inline">
          <div class="fonts">视频上传：</div>
          <div style="width: 340px;">
            <el-upload class="avatar-uploader"
                      :headers="token"
                      name = 'video'
                      action="https://www.xlpx.org.cn/manage/prod-api/parse/video/upload"
                      v-bind:on-progress="uploadVideoProcess"
                      v-bind:on-success="handleVideoSuccess"
                      v-bind:before-upload="beforeUploadVideo"
                      v-bind:show-file-list="false">
              <video v-if="videoForm.showVideoPath !='' && !videoFlag"
                      v-bind:src="videoForm.showVideoPath"
                      class="avatar video-avatar"
                      controls="controls">
                  您的浏览器不支持视频播放
              </video>
              <i v-else-if="videoForm.showVideoPath =='' && !videoFlag"
                  class="el-icon-plus avatar-uploader-icon"></i>
              <el-progress v-if="videoFlag == true"
                            type="circle"
                            v-bind:percentage="videoUploadPercent"
                            style="margin-top:7px;"></el-progress>
            </el-upload>
          </div>
       </div>
       
      <div class="apply_btn">
          <el-button @click="addShow = false">取消</el-button>
          <el-button type="primary" @click="submit()">提交</el-button>
      </div>
		</el-dialog>
    <el-dialog title="视频排序" :visible.sync="editShow" center :modal-append-to-body="false" :close-on-click-modal="false">
      <div class="inline">
         <div class="fonts">视频标题：</div><div><el-input v-model="name" placeholder="请输入"></el-input></div>
       </div>
		   <div class="inline">
         <div class="fonts">排序：</div><div><el-input v-model="sort" placeholder="请输入"></el-input></div>
       </div>
      <div class="apply_btn">
          <el-button @click="editShow = false">取消</el-button>
          <el-button type="primary" @click="editSubmit()">提交</el-button>
      </div>
		</el-dialog>
    <el-dialog title="视频绑定章节" :visible.sync="dealShow" center :modal-append-to-body="false" :close-on-click-modal="false">
      <div class="inline">
         <div class="fonts">视频标题：</div><div><el-input v-model="name" placeholder="请输入" disabled></el-input></div>
       </div>
		   <div class="inline">
          <div class="fonts">题库：</div>
          <div>
            <el-select v-model="selCourse" placeholder="请选择课程" class="sel_info" @change="getChapterList(selCourse)">
            <el-option
              v-for="item in courseList"
              :key="item.key"
              :label="item.value"
              :value="item.key"
            ></el-option>
          </el-select>
          </div>
       </div>
       <div class="inline">
          <div class="fonts">章节：</div>
          <div>
            <el-select v-model="selChapter" placeholder="请选择章节" class="sel_info" @change="getChapter(selChapter)">
            <el-option
              v-for="item in chapterList"
              :key="item.id"
              :label="item.chapter"
              :value="item.id"
            ></el-option>
          </el-select>
          </div>
       </div>
      <div class="apply_btn">
          <el-button @click="dealShow = false">取消</el-button>
          <el-button type="primary" @click="dealSubmit()">绑定</el-button>
      </div>
		</el-dialog>
  </div>
</template>

<script>
import { analysisVideoDel, analysisVideoAdd, analysisVideoList, courseList, videoEdit, videoSort, chapterLIst, binding } from "@/api/system/user";
import { getToken } from '@/utils/auth'
import {
 
} from "@/api/article";
export default {
  components: {},
  data() {
    return {
      token:{
       	'Authorization': getToken()
      },
      videoTitle: '',
      videoLevel: '',
      courseName: '',
      selCourse: '',
      selChapter: '',
      selChapterName: '',
      levelList: [
        {key: '1', value: '初级'},
        {key: '2', value: '中级'},
        {key: '3', value: '高级'}
      ],
      courseList: [],
      chapterList: [],
      list: [],
      limit: 10,
      total: 0,
      listLoading: false,
      curPage: 1,
      addShow: false,
      addVideoTitle: '',
      addVideoLevel: '',
      addCourseName: '',
      addCourseId: '',
      videoFlag: false,
      //是否显示进度条
      videoUploadPercent: "",
      //进度条的进度，
      isShowUploadVideo: false,
      //显示上传按钮
      videoForm: {
          showVideoPath: ''
      },
      videoName: '',
      note: '',
      sort: '',
      name: '',
      editShow: false,
      id: '',
      dealShow: false,
    };
  },
  created() {},
  mounted() {
    this.getCourseList()
    this.getList(1)
  },
  methods: {
    getChapterList(id) {
      chapterLIst(id).then(res => {
        if (res.code == '200') {
          this.chapterList = res.data
        } else {
          this.$message({ message: res.msg, type: "error" });
        }
      });
    },
    getChapter(val) {
      this.chapterList.forEach(element => {
        if (val == element.id) {
          this.selChapterName = element.chapter
        }
      });
    },
    edit(val) {
      this.editShow = true
      this.id = val.id
      this.sort = val.sort
      this.name = val.videoTitle
    },
    editSubmit() {
      let params = {
        sort: this.sort,
        id: this.id
      }
      videoSort(params).then(res => {
        if (res.code == 200) {
          this.editShow = false
          this.getList(1)
        } else {
          this.$message({ message: res.msg, type: "error" });
        }
      });
    },
    deals(val) {
      this.id = val.id
      this.dealShow = true
      this.name = val.videoTitle
      this.selChapter = ''
      this.selCourse = ''
      this.selChapterName = ''
    },
    dealSubmit() {
      let params = {
        id: this.id,
        chapterId: this.selChapter,
        chapterName: this.selChapterName
      }
      binding(params).then(res => {
        if (res.code == 200) {
          this.dealShow = false
          this.getList(1)
        } else {
          this.$message({ message: res.msg, type: "error" });
        }
      });
    },
    preview(val) {
      window.open(val)
    },
    change(val) {
      this.courseList.forEach(element => {
        if (val == element.key) {
          this.addCourseName = element.value
        }
      });
    },
    //上传前回调
    beforeUploadVideo(file) {
        var fileSize = file.size / 1024 / 1024 < 900;
        if (['video/mp4', 'video/avi', 'video/rmvb'].indexOf(file.type) == -1) {
            this.$message({ message: "请上传正确的视频格式", type: "error" });
            return false;
        }
        if (!fileSize) {
            this.$message({ message: "视频大小不能超过900MB", type: "error" });
            return false;
        }
        this.isShowUploadVideo = false;
    },
    //进度条
    uploadVideoProcess(event, file, fileList) {
        this.videoFlag = true;
        this.videoUploadPercent = file.percentage.toFixed(0) * 1;
    },
    //上传成功回调
    handleVideoSuccess(res, file) {
        this.isShowUploadVideo = true;
        this.videoFlag = false;
        this.videoUploadPercent = 0;
        //后台上传地址
        if (res.code == 200) {
          this.videoName = res.videoName
          this.videoForm.showVideoPath = "https://www.xlpx.org.cn/fire/" + res.videoShowUrl
        }
    },
    submit() {
      let params = {
        videoUrl: this.videoName,
        videoName: this.addVideoTitle
      }
      console.log(params)
      analysisVideoAdd(params).then(res => {
        if (res.code == 200) {
          this.addShow = false
          this.getList(1)
        } else {
          this.$message({ message: res.msg, type: "error" });
        }
      });
    },
    add() {
      this.addShow = true
      this.addVideoTitle = ''
      this.addVideoLevel = ''
      this.addCourseName = ''
      this.addCourseId = ''
      this.videoName = ''
    },
    getCourseList() {
      courseList().then(res => {
        if (res.code == '200') {
          this.courseList = []
          res.rows.forEach(element => {
            let temp = {
              key: element.courseId,
              value: element.courseName
            }
            this.courseList.push(temp)
          });
          
        } else {
          this.$message({ message: res.msg, type: "error" });
        }
      });
    },
    option(id, type) {
      if (type == '1') {
        this.note = '确定上架该视频么？'
      } else {
        this.note = '确定下架该视频么？'
      }
      this.$confirm(this.note, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let params = {
          id: id,
          videoStatus: type
        }
        videoEdit(params).then(res => {
          if (res.code == '200') {
            this.$message({ message: res.msg, type: "success" });
            this.getList(1)
          } else {
            this.$message({ message: res.msg, type: "error" });
          }
        });
      })
    },
    del(id) {
      this.$confirm('确定删除该视频吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        analysisVideoDel(id).then(res => {
          if (res.code == '200') {
            this.$message({ message: res.msg, type: "success" });
            this.getList(1)
          } else {
            this.$message({ message: res.msg, type: "error" });
          }
        });
      })
    },
    handleSizeChange() {

    },
    reset() {
      this.remarkName = ''
      this.enterpriseName = ''
    },
    /** 查询用户列表 */
    getList(page) {
      let params = {
        pageNum: page,
        pageSize: this.limit,
        videoName: this.videoTitle,
      }
      this.listLoading = true;
      analysisVideoList(params).then(res => {
        this.listLoading = false
        if (res.code == 200) {
          this.list = res.rows
          this.total = res.total
        } else {
          this.$message({ message: res.msg, type: "error" });
        }
      });
    },
  }
};
</script>
<style scoped>
.form {
  padding-left: 26px;
  padding-right: 24px;
  padding-top: 24px;
  background: #fff;
}
.search {
  display: flex;
  position: relative;
}
.search_info {
  width: 192px;
  height: 40px;
  margin-right: 16px;
}
.searchBtn {
  margin-left: 16px;
  height: 36px;
}
.sortStyle {
  height: 19px;
  float: right;
  /* right: 24px; */
  margin-top: 20px;
  margin-bottom: 30px;
}
.pos_right_btn {
  position: absolute;
  right: 0;
}
.opt_font {
  cursor: pointer;
  color: #2e82ff;
}
.detail_title {
  font-size: 16px;
  font-weight: 400;
  color: #212121;
  line-height: 22px;
}
.detail_title span {
  padding-left: 4px;
  background: #1e88e5;
  margin-right: 12px;
}
.row {
  display: flex;
  padding-bottom: 12px;
}
.detail_info {
  padding-top: 16px;
}
.info_left {
  display: flex;
}
.info_right {
  display: flex;
  padding-left: 202px;
}
.info_left_title {
  font-size: 14px;
  font-weight: 400;
  color: #616161;
  line-height: 20px;
  width: 112px;
  margin-right: 16px;
}
.info_left_content {
  font-size: 14px;
  font-weight: 400;
  color: #212121;
  line-height: 20px;
  width: 150px;
}
.pos_top {
  padding-top: 12px;
}
.detailTable {
  margin-top: 16px;
}
.opt_font {
  color: #1e88e5;
  cursor: pointer;
}
.page_pos {
  text-align: right;
  padding-top: 10px;
}
.backBtn {
  text-align: center;
  margin-top: 10px;
}
/deep/ .el-dialog {
  display: flex;
  flex-direction: column;
  margin: 0 !important;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-height: calc(100% -30px);
  /* max-width: ; */
}
/deep/ .el-dialog .el-dialog__body {
  flex: 1;
  height: 700px;
  overflow-y: auto;
  padding-top: 0;
}
.tab {
  display: flex;
  position: absolute;
  right: 32px;
  top: 14px;
}
.tab_border {
  border: 1px solid #409eff;
  color: #409eff;
  padding: 10px 12px;
  font-size: 14px;
  margin-right: 16px;
}
.change {
  border: 1px solid #f56c6c;
  color: #f56c6c;
}
.listTable {
  margin-top: 17px;
}
.search_info2 {
  width: 180px;
  height: 40px;
  margin-right: 16px;
}
.inline {
  display: flex;
  justify-content: center;
  padding-bottom: 20px;
}
.inline /deep/ .el-input__inner {
  width: 340px;
}
.fonts {
  width:160px;
  text-align: right;
  position: relative;
  top:12px;
  padding-right: 30px;
}
.apply_btn {
  display: flex;
  justify-content:center; 
}
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    /* text-align: center; */
    border:1px dashed #000;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  .sel_info {

  }
</style>
